<template>
  <div class="change-mine-info-wrap">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <li class="portrait wrap">
      <p>头像</p>
      <div>
        <img :src="photo" alt />
        <span class="iconfont icon-xiangyou"></span>
      </div>
    </li>
    <ul>
      <li class="infomain wrap" v-for='(item,index) in list' :key='index'>
        <p>{{item.title}}</p>
        <div>
          <p class='info'>{{item.info}}</p>
          <span class="iconfont icon-xiangyou"></span>
        </div>
      </li>
    </ul>
    <ul>
      <li class="infomain wrap" @click="toMSaddress">
        <p>收获地址</p>
        <div>
          <p class='info'>修改/添加</p>
          <span class="iconfont icon-xiangyou"></span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import photo from "@/assets/image/kongtouxiang.png";
export default {
  data() {
    return {
      photo: photo,
      list:[
          {
              title:'会员名',
              info:'181****1635'
          },
           {
              title:'性别',
              info:'女'
          },
           {
              title:'生日',
              info:'请选择'
          },
           {
              title:'所在地',
              info:'杭州'
          },
      ]
    };
  },
   methods: {
      onClickLeft(){
          this.$router.go(-1)
      },
      toMSaddress(){    // 进入管理收货地址页面
        this.$router.push('MSaddress');
      }
  },
};
</script>
<style lang="stylus" >
.change-mine-info-wrap {
  height: 100vh;
  background: #f4f4f4;

  .van-nav-bar .van-icon {
    color: #4E4E4E;
    height: 17px;
    width: 17px;
  }

  .van-nav-bar__title {
    font-size: 18px;
    color: #494949;
    font-family: PingFang-SC-Medium;
  }

  .portrait {
    height: 92px;
    margin-top: 10px;
  }
  .infomain{
    height 57px
    position relative
    &::after{
      content ''
      height 2px
      width 344px
      position absolute
      left 14px
      bottom -1px
      background #f4f4f4
      z-index 20
    }
  }

  ul{
    margin-top 10px
  }
  .wrap {
    width: 100%;
    padding: 0 22px 0 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;

    img {
      height: 55px;
      width: 55px;
      margin-right: 7px;
    }

    p {
      font-size: 16px;
      color: #464646;
    }

    div {
      display: flex;
      align-items: center;
    }
    .info{
      color #BEBEBE
    }
  }

  .icon-xiangyou {
    color: #BEBEBE;
    font-size: 24px;
    width: 12px;
    height: 12px;
    margin-top: -8px;
  }
}
</style>